<template>
  <!-- 开户行信息 -->
  <section class="bank-content">
    <div class="bank-table">
      <header>
        <h3>开户行信息</h3>
      </header>
      <!-- <pre>{{supplierInfo.supplierBill}}</pre> -->
      <!-- <pre>{{supplierInfo.supplierContractBill}}</pre> -->
      <AdvancedTable ref="zTable" :autoResize="true" :edit-config="editConfig" :toolbarConfig="toolbarConfig"
        :edit-rules="editRules" :dataSource="tableList" :columns="tableColumns">
        <template #toolbar_buttons>
          <el-button v-if="!readonly" type="primary" @click="handleInsert">添加行</el-button>
        </template>
        <template #supplierCode="{ row }">
          {{ (row.newInvoiceSupplier || !row.invoiceSupplierCode) ? '新增开票供应商' : row.invoiceSupplierCode }}
        </template>
        <template #supplier="{ row, _rowIndex }">
          <div v-if="readonly || row.payeeId">
            {{ row.invoiceSupplierName }}
          </div>
          <div v-else>
            <el-input v-model.trim="row.invoiceSupplierName" placeholder="请关联供应商" :maxlength="100"
              @blur="handleCheckSupplier(row, _rowIndex)">
              <el-button slot="append" icon="el-icon-search" @click="handleSearchSupplier(row, _rowIndex)"></el-button>
            </el-input>
            <!-- <vxe-pulldown ref="yDown" transfer>
              <template #default>
                <vxe-input
                  v-model.trim="row.invoiceSupplierName"
                  class="my-search"
                  placeholder="请关联供应商"
                  :readonly="!row.newInvoiceSupplier">
                  <template #suffix>
                    <vxe-button type="text" class="my-search-btn" @click="handleSearchSupplier(row, _rowIndex)">
                      <template #icon>
                        <i class="el-icon-search"></i>
                      </template>
                    </vxe-button>
                  </template>
                </vxe-input>
              </template>
              <template #dropdown>
                <vxe-list height="200" class="superior-dropdown" :data="bankList" auto-resize>
                  <template #default="{ items }">
                    <div class="list-item" v-for="(item,key) in items" :key="key" @click="selectEvent(item, _rowIndex)">
                      <span>{{ item.label }}</span>
                    </div>
                  </template>
                </vxe-list>
              </template>
            </vxe-pulldown> -->
          </div>
        </template>
        <template #payee_edit="{ row, _rowIndex }">
          <div v-if="row.newInvoiceSupplier || _rowIndex === 0 || true">
            <vxe-input v-model.trim="row.payee" class="payee-input" placeholder="请输入收款人"
              @blur="({ value, e }) => { handleInputChange(value, row, 'payee') }"></vxe-input>
          </div>
          <div v-else>{{ row.payee }}</div>
        </template>
        <template #bank_account_edit="{ row, _rowIndex }">
          <div v-if="row.newInvoiceSupplier || _rowIndex === 0 || true">
            <vxe-input v-model.trim="row.bankAccount" :maxlength="100" class="addcount-input" placeholder="请输入收款账号"
              @change="({ value, e }) => { handleInputChange(value, row, 'bankAccount') }"></vxe-input>
          </div>
          <div v-else>{{ row.bankAccount }}</div>
        </template>
        <template #bank_edit="{ row, _rowIndex }">
          <div v-if="row.newInvoiceSupplier || _rowIndex === 0 || true">
            <!-- <vxe-pulldown ref="xDown" transfer>
              <template #default>
                <vxe-input v-model.trim="row.bank" placeholder="请输入开户行" @keyup="keyupEvent(row)"></vxe-input>
              </template>
              <template #dropdown>
                <vxe-list height="200" class="superior-dropdown" :data="bankList" auto-resize>
                  <template #default="{ items }">
                    <div class="list-item" v-for="(item,key) in items" :key="key" @click="selectEvent(item, _rowIndex)">
                      <span>{{ item.label }}</span>
                    </div>
                  </template>
                </vxe-list>
              </template>
            </vxe-pulldown> -->
            <el-input readonly v-model.trim="row.bank" placeholder="请选择开户行" :maxlength="100">
              <el-button slot="append" icon="el-icon-search" @click="handleSearchBank(row, _rowIndex)"></el-button>
            </el-input>
          </div>
          <div v-else>{{ row.bank }}</div>
        </template>
        <!-- <template #bank_id_edit="{ row }">
          <div v-if="row.newInvoiceSupplier">
            <vxe-input v-model="row.bankBranchId" class="-input"></vxe-input>
          </div>
          <div v-else>{{row.bankBranchId}}</div>
        </template> -->
        <template #accept_invoice_edit="{ row }">
          <vxe-select v-model="row.acceptInvoice" class="accept_invoice-selet" placeholder="请选择是否承兑" transfer>
            <vxe-option v-for="(item, key) in isAcceptance" :key="key" :value="item.value" :label="item.label">
            </vxe-option>
          </vxe-select>
        </template>
        <template #accept_invoice_default="{ row }">
          {{ isAcceptanceMap[row.acceptInvoice] }}
        </template>
        <template #sort_edit="{ row, _rowIndex }">
          <div v-if="row.newInvoiceSupplier || _rowIndex === 0 || true">
            <vxe-input type="number" v-model.trim="row.sort" class="addcount-input" placeholder="请输入排列顺序"
              @change="handleInputChange"></vxe-input>
          </div>
          <div v-else>{{ row.sort }}</div>
        </template>
        <template #deactivate_edit="{ row }">
          <vxe-select v-model="row.deactivate" class="unfriend-select" placeholder="请选择是否停用收款信息" transfer>
            <vxe-option v-for="(item, key) in isDelete" :key="key" :value="item.value" :label="item.label"></vxe-option>
          </vxe-select>
        </template>
        <template #deactivate_default="{ row }">
          {{ isDeleteMap[row.deactivate] }}
        </template>
        <template #unfriend_edit="{ row }">
          <vxe-select v-model="row.unfriend" class="unfriend-select" @change="(data) => handleSelectUnfriend(data,row)" placeholder="请选择解除关系" transfer>
            <vxe-option v-for="(item, key) in isDelete" :key="key" :value="item.value" :label="item.label"></vxe-option>
          </vxe-select>
        </template>
        <template #unfriend_default="{ row }">
          {{ isDeleteMap[row.unfriend] }}
        </template>
        <template #relation_edit="{ row }">
          <vxe-select v-model="row.relation" class="relation-select" placeholder="请选择与供应商关系"
            :options="relationshipProve" clearable transfer>
            <template #opt266="{ option }">
              <el-tooltip class="item" effect="dark" :content="option.hint" placement="left">
                <span>{{ option.label }}</span>
              </el-tooltip>
            </template>
          </vxe-select>
        </template>
        <template #relation_default="{ row }">
          <span v-if="row.relation">{{ relationshipProveMap[row.relation] }}</span>
          <span v-else class="vxe-cell--placeholder">请点击选择...</span>
        </template>
        <template #reason_edit="{ row }">
          <vxe-select v-model="row.differentReason" class="different-reason-select" placeholder="请选择不一致原因"
            :options="supnameCauseofInconsitency" clearable transfer>
            <template #opt265="{ option }">
              <el-tooltip class="item" effect="dark" :content="option.hint" placement="left">
                <span>{{ option.label }}</span>
              </el-tooltip>
            </template>
          </vxe-select>
        </template>
        <template #reason_default="{ row }">
          <span v-if="row.differentReason">{{ supnameCauseofInconsitencyMap[row.differentReason] }}</span>
          <span v-else class="vxe-cell--placeholder">请点击输入...</span>
        </template>
        <template #remark_edit="{ row }">
          <vxe-input v-model.trim="row.differentRemark" class="remark-input" placeholder="请输入不一致原因说明"></vxe-input>
        </template>
        <template #annex="{ row, _rowIndex }">
          <span v-if="row.relationAnnex || readonly">
            <AnnexDownloadButton v-if="row.relationAnnex" v-model="row.relationAnnex" buttonText="关系证明"
              fileName="关系证明" />
            <el-tooltip effect="dark" content="删除" v-if="!readonly">
              <i class="delete-icon el-icon-close" @click="handleDelteAnnex(row, _rowIndex)"></i>
            </el-tooltip>
          </span>
          <AnnexUploadButton v-else typeList="jpg/jpge/png/pdf/doc/docx/xls/xlsx"
            @onUploaded="(params) => { handleUploaded(params, row, _rowIndex) }" />
        </template>
        <template #actions="{ row, _rowIndex }">
          <vxe-button v-if="_rowIndex && !row.payeeId" type="text" status="primary" @click="removeRow(row, _rowIndex)">
            删除行</vxe-button>
        </template>
      </AdvancedTable>
      <!-- <pre>{{supplierInfo}}</pre> -->
      <!-- <pre>{{tableList}}</pre> -->
    </div>
    <SelectSupplierDialog :supplierVisible.sync="supplierDialogVisible" @handle-select="handleGetSupplierInfo"
      invoice />
    <SelectBankDialog :bankVisible.sync="bankDialogVisible" @handle-select="handleGetBankInfo" />
  </section>
</template>

<script>
import { mapState } from 'vuex';
import AdvancedTable from '@/components/supplier/AdvancedTable'; // 表格组件
import AnnexUploadButton from '@/pages/supplier/components/annexUploadButton' // 上传附件按钮
import AnnexDownloadButton from '@/pages/supplier/components/annexDownloadButton' // 下载附件按钮
import SelectSupplierDialog from '@/pages/supplier/components/SelectSupplierDialog'
import SelectBankDialog from '@/pages/supplier/components/SelectBankDialog' // 选择开户行
import { bankInformation } from '@/pages/supplier/constants'
import { getBankDocList, validateInvoiceSupplierService } from '@/api/supplier/components';
import { queryInvoiceSupplierByFullName } from '@api/supplier/management/common';
import { YN_SELECT_LIST } from '@/pages/supplier/constants/common'
import { list2Obj, enToZhForContent } from '@/pages/supplier/utils';
const { getInitialFieldsValue, getTableColumns } = bankInformation

export default {
  components: {
    AdvancedTable,
    AnnexUploadButton,
    AnnexDownloadButton,
    SelectSupplierDialog,
    SelectBankDialog
  },
  props: {
    readonly: { // 表是否开启禁用
      type: Boolean, default: false
    },
    dataSource: { // 数据源
      type: Array, default () { return [] }
    },
    supplierInfo: { type: Object, default () { return null } }, // 供应商信息
    rules: { type: Object, default () { return null } }, // 数据验证
  },
  computed: {
    ...mapState('supplier/dict', [
      'dictOptData',
      'sysDictOptData',
    ]),
    isAcceptance () {
      // 是否承兑
      return YN_SELECT_LIST.filter(i => !i.disabled)
    },
    isAcceptanceMap () {
      // 是否承兑map
      return list2Obj(this.isAcceptance)
    },
    isDelete () {
      // 解除关系
      return YN_SELECT_LIST.filter(i => !i.disabled)
    },
    isDeleteMap () {
      // 解除关系map
      return list2Obj(this.isDelete)
    },
    relationshipProve () {
      // 与供应商关系
      const hintObj = {
        1113: '供应商、开票供应商均为个体工商户名称，收款人为经营者本人', // 个体工商户法定代表人
        1114: '供应商、开票供应商均为个体工商户名称，收款人与经营者为夫妻关系等，必须上传《委托付款函》及关系证明（例：户口本、结婚证、出生证明等能明确关系的证明）', // 个体工商户法定代表人亲属
        1115: '公司类型：供应商与开票供应商名称一致，但收款人不一致，总分机构关系允许操作，通过企查查等能够查明公司关系的截图证明均可', // 总分机构关系
        1116: '供应商与开票供应商名称一致，但收款人不一致，母子公司关系允许操作，必须上传《委托付款函》', // 母子公司关系
      }
      if (this.dictOptData && this.dictOptData['266'] && this.dictOptData['266'].length) {
        return this.dictOptData['266'].map(i => {
          i.slots = { default: 'opt266' }
          i.hint = hintObj[i.value]
          return i
        })
      } else {
        return []
      }
    },
    relationshipProveMap () {
      // 与供应商关系map
      return list2Obj(this.relationshipProve)
    },
    supnameCauseofInconsitency () {
      // 不一致原因
      const hintObj = {
        1110: '供应商名称因业务原因增加商品特性、区域等前后缀', // 供应商名称带前后缀
        1111: '供应商与开票供应商之间是总分机构关系', // 总分机构关系
        1112: '供应商与开票供应商之间是母子公司关系', // 母子公司关系
      }
      if (this.dictOptData && this.dictOptData['265'] && this.dictOptData['265'].length) {
        return this.dictOptData['265'].map(i => {
          i.slots = { default: 'opt265' }
          i.hint = hintObj[i.value]
          return i
        })
      } else {
        return []
      }
    },
    supnameCauseofInconsitencyMap () {
      // 不一致原因map
      return list2Obj(this.supnameCauseofInconsitency)
    },
    toolbarConfig () {
      if (this.readonly) {
        return {}
      }
      return {
        slots: {
          // 自定义工具栏模板
          buttons: 'toolbar_buttons',
        }
      }
    },
    editConfig () {
      if (this.readonly) {
        return {}
      }
      return { trigger: 'click', mode: 'row' }
    },
    editRules () {
      const { tableList, readonly, supplierInfo, rules: propRules } = this
      if (readonly) {
        return {}
      }
      if (propRules) {
        return propRules
      }
      const { supplierBill = {}, supplierContractBill = {} } = supplierInfo
      const { supplierName = '' } = supplierBill
      const { acceptInvoice = '' } = supplierContractBill
      const hasAcceptInvoice = tableList.some(i => i.acceptInvoice === 1)
      const hasUnfriend = tableList.some(i => i.unfriend === 2)
      const rules = {
        invoiceSupplierName: [{ required: true, message: '请关联开票供应商' }],
        payee: [
          { required: true, message: '收款人必须填写' },
          { max: 100, message: '收款人最多100字符' },
          // {
          //   validator: ({ cellValue }) => {
          //     const regx = new RegExp(/^[a-zA-Z\u4e00-\u9fa5]+$/)
          //     if (!regx.test(cellValue)) {
          //       return new Error('不支持特殊字符')
          //     }
          //   },
          //   messgae: '不支持特殊字符' }
        ],
        bankAccount: [{ required: true, message: '收款账号必须填写' }],
        bank: [{ required: true, message: '开户行必须填写' }, {
          validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
            const { bank, bankNumber } = row
            if (!bank || !bankNumber) {
              return new Error('请正确选择开户行信息')
            }
          }
        }],
        acceptInvoice: [{ required: true, message: '是否承兑必须选择' }],
        unfriend: [{ required: true, message: '解除关系必须选择' },
          {
            validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
              if (!hasUnfriend) {
                return new Error('解除关系必须有一条选择【否】')
              }
            }
          }
        ],
        relation: [{
          validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
            const { invoiceSupplierName, payee, relation } = row
            if (invoiceSupplierName && payee && invoiceSupplierName !== payee && !relation) {
              console.log('invoiceSupplierName', invoiceSupplierName, payee)
              return new Error('开票供应商”与“收款人"不一致，需填写“与供应商关系')
            }
          }
        }],
        relationAnnex: [{
          validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
            const { invoiceSupplierName, payee, relationAnnex } = row
            if (invoiceSupplierName && payee && invoiceSupplierName !== payee && !relationAnnex) {
              return new Error('“开票供应商”与“收款人"不一致，需上传证明')
            }
          }
        }],
      };
      if (supplierName) {
        rules.differentReason = [{
          validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
            if (row.invoiceSupplierName !== supplierName && !cellValue) {
              return new Error('开票供应商名称与供应商名称不一致，不一致原因为必填')
            }
          }
        }]
      }
      if (supplierName) {
        rules.differentRemark = [{
          validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
            if (row.invoiceSupplierName !== supplierName && !cellValue) {
              return new Error('开票供应商名称与供应商名称不一致，不一致原因说明为必填')
            }
          }
        }]
      }
      if (acceptInvoice && acceptInvoice === 1) {
        rules.acceptInvoice = [
          { required: true, message: '是否承兑必须选择' },
          {
            validator: ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
              if (!hasAcceptInvoice) {
                return new Error('必须选择某一个开户行是否承兑为是')
              }
            }
          }
        ]
      }
      return rules
    },
  },
  data () {
    return {
      exporting: false,
      tableList: this.dataSource,
      initialFieldsValue: _.cloneDeep(getInitialFieldsValue(this.readonly)),
      supplierDialogVisible: false,
      bankDialogVisible: false,
      rowIndex: 0,
      tableColumns: getTableColumns(this.readonly),
      bankList: [],
    };
  },
  watch: {
    dataSource: {
      handler (newVal, oldVal) {
        if (!oldVal && newVal && newVal.length) {
          this.tableList = newVal.map(i => {
            i.relationAnnex = i.relationAnnex && i.relationAnnex.trim()
            return i
          })
        }
      },
      immediate: true,
      deep: true
    },
    tableList: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$emit('change', { value: newVal, prop: 'supplierPayeeBillList' })
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    handleSelectUnfriend (data, row) {
      const { value } = data;
      const { invoiceSupplierId } = row;
      if (value == 1 && !invoiceSupplierId) {
        row.unfriend = 2
        return this.$message.warning('请先选择开票供应商')
      }
      if (value == 1 && invoiceSupplierId) {
        this.validateInvoiceSupplier(row, invoiceSupplierId)
      }
    },
    async validateInvoiceSupplier (row, invoiceSupplierId) {
      const res = await validateInvoiceSupplierService({ invoiceSupplierId })
      if (!res) {
        row.unfriend = 2
      }
    },
    // 设置值
    setTableData (data, index) {
      this.$set(this.tableList, index, data)
    },
    // 新增行
    async handleInsert (row) {
      let cloneObj = _.cloneDeep(this.initialFieldsValue)
      const [first] = this.tableList;
      if (first && first.supplierId) {
        const { supplierId, supplierCode } = first
        cloneObj = Object.assign(cloneObj, { supplierId, supplierCode })
      }
      cloneObj.newInvoiceSupplier = 1
      const $table = this.$refs.zTable.$refs.grid
      await $table.insertAt(cloneObj, -1)
      this.tableList.push(cloneObj)
    },
    // 删除行
    removeRow (row, index) {
      this.$refs.zTable.$refs.grid.remove(row)
      this.tableList.splice(index, 1)
    },
    handleInputChange (val, row, fileName) {
      if (fileName == 'payee') {
        row[fileName] = enToZhForContent(val)
      }
      if (fileName == 'bankAccount') {
        row[fileName] = val.replace(/[^\d]+/g, '')
      }
      this.$refs.zTable.$refs.grid.clearValidate()
    },
    // 供应商输入框失去焦点是全名匹配查找供应商
    async handleCheckSupplier (row, index) {
      const { tableList } = this
      row.invoiceSupplierName = enToZhForContent(row.invoiceSupplierName)
      const invoiceSupplierName = row.invoiceSupplierName
      if (invoiceSupplierName) {
        const resp = await queryInvoiceSupplierByFullName({ invoiceSupplierName })
        if (resp && resp.result) {
          // console.log('resp.result :>> ', resp.result);
          const { invoiceSupplierCode, invoiceSupplierId } = resp.result
          tableList[index].newInvoiceSupplier = 0
          tableList[index].invoiceSupplierCode = invoiceSupplierCode
          tableList[index].invoiceSupplierId = invoiceSupplierId
        } else {
          tableList[index].newInvoiceSupplier = 1
          tableList[index].invoiceSupplierCode = ''
          tableList[index].invoiceSupplierId = ''
        }
      } else {
        tableList[index].newInvoiceSupplier = 1
        tableList[index].invoiceSupplierCode = ''
        tableList[index].invoiceSupplierId = ''
      }
      tableList[index].unfriend = 2
    },
    // 显示搜索供应商弹窗
    handleSearchSupplier (row, index) {
      this.rowIndex = index
      this.supplierDialogVisible = true
    },
    // 显示搜索开户行
    handleSearchBank (row, index) {
      this.rowIndex = index
      this.bankDialogVisible = true
    },
    // 获取供应商信息
    handleGetSupplierInfo (row) {
      console.log(row)
      const {
        invoiceSupplierName, // 供应商编码
        invoiceSupplierCode, // 供应商编码
        invoiceSupplierId, // 供应商id
        // payee, // 收款人
        // bankBranchId, // 支行id
        // bankName, // 支行
        // bankNumber, // 联行号
        // bankAccount, // 账号
      } = row;
      const { tableList, rowIndex } = this
      tableList[rowIndex].newInvoiceSupplier = 0
      tableList[rowIndex].invoiceSupplierName = invoiceSupplierName
      tableList[rowIndex].invoiceSupplierCode = invoiceSupplierCode
      tableList[rowIndex].invoiceSupplierId = invoiceSupplierId
      tableList[rowIndex].payee = invoiceSupplierName
      // tableList[rowIndex].bank = bankName
      // tableList[rowIndex].bankBranchId = bankBranchId
      // tableList[rowIndex].bankNumber = bankNumber
      // tableList[rowIndex].bankAccount = bankAccount
      tableList[rowIndex].unfriend = 2
    },
    // 获取开户行信息
    handleGetBankInfo (row) {
      const { tableList, rowIndex } = this
      tableList[rowIndex].bank = row.bankName
      tableList[rowIndex].bankBranchId = row.bankId
      tableList[rowIndex].bankNumber = row.bankNumber
    },
    // 上传关系证明
    handleUploaded ({ response, file }, row, index) {
      const { result } = response
      row.relationAnnex = result
    },
    // 删除关系证明
    handleDelteAnnex (row) {
      row.relationAnnex = ''
    },
    // 获取银行
    async queryBankInfo (queryString) {
      if (!queryString) {
        return
      }
      const { result } = await getBankDocList({ bankName: queryString, pageNum: 1, size: 1000 })
      if (result && result.data && result.data.length) {
        this.bankList = result.data.map(i => {
          return { label: i.bankName, value: i.bankId, number: i.bankNumber }
        })
        this.$refs.xDown && this.$refs.xDown.showPanel()
      } else {
        this.bankList = []
        this.$refs.xDown && this.$refs.xDown.hidePanel()
      }
    },
    selectEvent (item, index) {
      this.tableList[index].bank = item.label
      this.tableList[index].bankBranchId = item.value
      this.tableList[index].bankNumber = item.number
      this.$refs.xDown && this.$refs.xDown.hidePanel()
      this.$refs.zTable.$refs.grid.clearValidate()
    },
    keyupEvent (row) {
      this.$refs.zTable.$refs.grid.clearValidate()
      row.bankNumber = ''
      this.queryBankInfo(row.bank)
    },
    async validate () {
      let errMap = await this.$refs.zTable.$refs.grid.validate(true)
      if (errMap) {
        return errMap
      }
    },
    getValidate () {
      return this.$refs.zTable.$refs.grid.validate(true)
    },
    getData () {
      return this.tableList
    },
  },
}
</script>

<style lang="less" scoped>
.bank-content {
  header {
    text-align: left;
    margin-bottom: 0;
  }

  .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  margin-bottom: 16px;
}

.delete-icon {
  color: red;
  cursor: pointer;
}

.superior-dropdown {
  max-height: 200px;
  border-radius: 4px;
  border: 1px solid #dadce0;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
  background-color: #fff;

  .list-item {
    padding: 4px;

    &:hover {
      cursor: pointer;
      background-color: #f9f9f9;
    }
  }
}
</style>
<style lang="less">
.my-red {
  color: red;
}

.my-green {
  color: green;
}

.my-domain.vxe-input {
  height: 34px;
  width: 300px;
}

.my-domain.vxe-input .vxe-input--prefix {
  width: 60px;
  height: 32px;
  top: 1px;
  text-align: center;
  border-right: 1px solid #dcdfe6;
  background-color: #f5f7fa;
}

.my-domain.vxe-input .vxe-input--inner {
  padding-left: 72px;
  border: 1px solid #dcdfe6;
}

.my-search.vxe-input {
  height: 34px;
  width: 280px;
}

.my-search.vxe-input .vxe-input--suffix {
  //
  height: 32px;
  top: 1px;
  text-align: center;
  border-left: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  width: auto;
  cursor: pointer;

  .vxe-input--suffix-icon {
    display: block;
    // padding: 0 24px;
    width: 60px;
  }
}

.my-search-btn {
  width: 60px;
}

.my-search.vxe-input .vxe-input--inner {
  padding-right: 62px;
  border: 1px solid #dcdfe6;
}
</style>

<style lang="less">
.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid {
  white-space: nowrap;
  width: auto
}
</style>
